{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{% extends "layouts/full-width-landmarks.njk" %}

{% block pageTitle %}{{ exampleName | unslugify }} - GOV.UK Frontend{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-width-container">
    <h1 class="govuk-heading-l">Example: Footer alignment</h1>

    <h2 class="govuk-heading-m">Three equal columns</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds (two columns) / one-third layout</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "Two-thirds (two columns)",
        "width": "two-thirds",
        "columns": 2,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          },
          {
            "href": "#4",
            "text": "Navigation item 4"
          },
          {
            "href": "#5",
            "text": "Navigation item 5"
          },
          {
            "href": "#6",
            "text": "Navigation item 6"
          }
        ]
      },
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds (one column) / one-third layout</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "Two-thirds (one column)",
        "width": "two-thirds",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">One-third / two-thirds (two columns) layout</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "Two-thirds (two columns)",
        "width": "two-thirds",
        "columns": 2,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          },
          {
            "href": "#4",
            "text": "Navigation item 4"
          },
          {
            "href": "#5",
            "text": "Navigation item 5"
          },
          {
            "href": "#6",
            "text": "Navigation item 6"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">One-third / two-thirds (one column) layout</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "Two-thirds (one column)",
        "width": "two-thirds",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">Quarters</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "One quarter",
        "width": "one-quarter",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One quarter",
        "width": "one-quarter",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One quarter",
        "width": "one-quarter",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One quarter",
        "width": "one-quarter",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">One-half (one column)</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "One half",
        "width": "one-half",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      },
      {
        "title": "One half",
        "width": "one-half",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">One-half (two columns)</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-quarter">
        <h3 class="govuk-heading-m">One quarter</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "One half",
        "width": "one-half",
        "columns": 2,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          },
          {
            "href": "#4",
            "text": "Navigation item 4"
          },
          {
            "href": "#5",
            "text": "Navigation item 5"
          },
          {
            "href": "#6",
            "text": "Navigation item 6"
          }
        ]
      },
      {
        "title": "One half",
        "width": "one-half",
        "columns": 2,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          },
          {
            "href": "#4",
            "text": "Navigation item 4"
          },
          {
            "href": "#5",
            "text": "Navigation item 5"
          },
          {
            "href": "#6",
            "text": "Navigation item 6"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">Full width</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "Full width",
        "columns": 3,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          },
          {
            "href": "#4",
            "text": "Navigation item 4"
          },
          {
            "href": "#5",
            "text": "Navigation item 5"
          },
          {
            "href": "#6",
            "text": "Navigation item 6"
          }
        ]
      }
    ]
  }) }}

  <div class="govuk-width-container">
    <h2 class="govuk-heading-m govuk-!-margin-top-6">Multi-row layout</h2>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One third</h3>
        <p class="govuk-body">
          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
        </p>
      </div>
    </div>
  </div>

  {{ govukFooter({
    "navigation": [
      {
        "title": "Two-thirds (one column)",
        "width": "two-thirds",
        "columns": 2,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          }
        ]
      },
      {
        "title": "Two-thirds (two-columns)",
        "width": "two-thirds",
        "columns": 2,
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          },
          {
            "href": "#2",
            "text": "Navigation item 2"
          },
          {
            "href": "#3",
            "text": "Navigation item 3"
          },
          {
            "href": "#4",
            "text": "Navigation item 4"
          }
        ]
      },
      {
        "title": "One-third",
        "width": "one-third",
        "items": [
          {
            "href": "#1",
            "text": "Navigation item 1"
          }
        ]
      }
    ]
  }) }}
{% endblock %}
